<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>IFLOW CMS 安装引导</title>
    <style>
        body {
            overflow-x: hidden;
            margin: 0;
        }
        .tab-pane {
            margin-top: 20px;
        }
        a {
            text-decoration: none;
        }
        .next-step {
            margin-top: 10px !important;
            float: right;
        }
        .success {
            color: #67C23A;
        }
        .error {
            color: #F56C6C;
        }
        .el-step__icon-inner {
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div id="app">
        <literal>
            <el-menu
                :default-active="activeIndex"
                class="el-menu-demo"
                mode="horizontal"
            >
                <el-menu-item :index="1">IFLOW_CMS 安装引导页面</el-menu-item>
                <el-menu-item :index="2">
                    <a href="http://framework.mzshe.cn" target="_blank">IFLOW_FRAMEWORK</a>
                </el-menu-item>
                <el-menu-item :index="3">
                    <a href="http://cms.mzshe.cn" target="_blank">IFLOW_CMS</a>
                </el-menu-item>
            </el-menu>
            <el-row :gutter="20" style="margin-top: 20px">
                <el-col :span="18" :offset="4">
                    <el-steps :space="120" :active="stepsIndex" finish-status="success" simple>
                        <el-step title="环境检测"></el-step>
                        <el-step title="数据库配置"></el-step>
                        <el-step title="初始化数据库"></el-step>
                        <el-step title="管理账户设置"></el-step>
                        <el-step title="安装完成"></el-step>
                    </el-steps>
                    <div v-if="stepsIndex === 0" class="tab-pane">
                        <el-descriptions
                                title="环境检测信息"
                                direction="vertical"
                                :column="1"
                                border
                        >
                            <el-descriptions-item label="PHP扩展检测">
                                <el-descriptions
                                        direction="vertical"
                                        :column="2"
                                        border
                                >
                                    <template v-for="(ext, index) in iextRef" :key="index">
                                        <el-descriptions-item label="扩展名称">
                                            {{ ext }}
                                        </el-descriptions-item>
                                        <el-descriptions-item label="安装状态">
                                            <i :class="!idneRef.includes(ext) ? 'fa fa-check-circle success' : 'fa fa-times-circle error'"></i>
                                        </el-descriptions-item>
                                    </template>
                                </el-descriptions>
                            </el-descriptions-item>
                            <el-descriptions-item label="系统运行目录读写权限检测">
                                <el-descriptions
                                        direction="vertical"
                                        :column="2"
                                        border
                                >
                                    <template v-for="(dwr, index) in dwrRef" :key="index">
                                        <el-descriptions-item label="目录名称">
                                            {{ dwr[0] }}
                                        </el-descriptions-item>
                                        <el-descriptions-item label="读写状态">
                                            <i :class="dwr[1] ? 'fa fa-check-circle success' : 'fa fa-times-circle error'"></i>
                                        </el-descriptions-item>
                                    </template>
                                </el-descriptions>
                            </el-descriptions-item>
                        </el-descriptions>
                    </div>
                    <div v-if="stepsIndex === 1" class="tab-pane">
                        <el-form
                            ref="ruleFormTable"
                            :model="ruleForm"
                            :rules="rules"
                            label-width="120px"
                            class="demo-ruleForm"
                        >
                            <el-form-item label="数据库地址" prop="hostname" required>
                                <el-input v-model="ruleForm.hostname"></el-input>
                            </el-form-item>
                            <el-form-item label="数据库端口" prop="hostport" required>
                                <el-input v-model="ruleForm.hostport"></el-input>
                            </el-form-item>
                            <el-form-item label="数据库名称" prop="database" required>
                                <el-input v-model="ruleForm.database"></el-input>
                            </el-form-item>
                            <el-form-item label="数据库账户" prop="username" required>
                                <el-input v-model="ruleForm.username"></el-input>
                            </el-form-item>
                            <el-form-item label="数据库密码" prop="password" required>
                                <el-input type="password" v-model="ruleForm.password"></el-input>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div v-if="stepsIndex === 2" class="tab-pane">
                        <el-result
                            icon="info"
                            title="初始化数据库"
                            sub-title="点击下一步初始化数据库"
                        >
                        </el-result>
                    </div>
                    <div v-if="stepsIndex === 3" class="tab-pane">
                        <el-form
                            ref="userFormRef"
                            :model="userForm"
                            :rules="userFormRules"
                            label-width="120px"
                            class="demo-ruleForm"
                        >
                            <el-form-item label="用户名" prop="user_name" required>
                                <el-input v-model="userForm.user_name" placeholder="请输入用户名"></el-input>
                            </el-form-item>
                            <el-form-item label="密码" prop="password" required>
                                <el-input v-model="userForm.password" type="password" placeholder="请输入密码">></el-input>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div v-if="stepsIndex === 5 || stepsIndex === 4" class="tab-pane">
                        <el-result
                                icon="success"
                                title="站点搭建成功"
                                sub-title="点击下方按钮进入主页"
                        >
                            <template #extra>
                                <el-button type="primary" size="medium" @click="nextStep">nextStep</el-button>
                            </template>
                        </el-result>
                    </div>
                    <el-button
                        type="primary"
                        class="next-step"
                        @click="nextStep"
                        v-if="stepsIndex < 4"
                    >Next step</el-button>
                </el-col>
            </el-row>
        </literal>
    </div>

    <!--  格式化参数  -->
    <function action="json_encode" props="$install_dose_not_ext" paramsName="idne" />
    <function action="json_encode" props="$install_ext" paramsName="iext" />
    <function action="json_encode" props="$dir_write" paramsName="dwr" />
    <function action="session" props="'install_step'" paramsName="install_step" />
    <phpscript tag="script">
        echo "
            const idne = $idne;
            const iext = $iext;
            const dwr = $dwr;
            const install_step = '$install_step';
            const sessionToken = '$sessionToken';
        ";
    </phpscript>
</body>
<!-- Import style -->
<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
<!-- Import Vue 3 -->
<script src="//unpkg.com/vue@next"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
<!-- Import component library -->
<script src="//unpkg.com/element-plus"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="/static/install/js/main.js"></script>
</html>